<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <meta name="generator" content="Hugo 0.120.4">
    <meta name="generator" content="Relearn 5.23.2">
    <meta name="description" content="操作系统-数据结构与算法-云计算-ARM64-C/C&#43;&#43;-Go">
    <meta name="author" content="Jiang Kun">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="[生活/工作/学习] :: 笔记">
    <meta name="twitter:description" content="操作系统-数据结构与算法-云计算-ARM64-C/C&#43;&#43;-Go">
    <meta property="og:title" content="[生活/工作/学习] :: 笔记">
    <meta property="og:description" content="操作系统-数据结构与算法-云计算-ARM64-C/C&#43;&#43;-Go">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://dipperkun.gitee.io/">
    <meta property="og:site_name" content="笔记">
    <title>[生活/工作/学习] :: 笔记</title>
    <link href="https://dipperkun.gitee.io/" rel="canonical" type="text/html" title="[生活/工作/学习] :: 笔记">
    <link href="./index.xml" rel="alternate" type="application/rss+xml" title="[生活/工作/学习] :: 笔记">
    <link href="./images/favicon.png?1701141428" rel="icon" type="image/png">
    <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
    <link href="./css/fontawesome-all.min.css?1701141429" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1701141429" rel="stylesheet"></noscript>
    <link href="./css/nucleus.css?1701141429" rel="stylesheet">
    <link href="./css/auto-complete.css?1701141429" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1701141429" rel="stylesheet"></noscript>
    <link href="./css/perfect-scrollbar.min.css?1701141429" rel="stylesheet">
    <link href="./css/fonts.css?1701141429" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1701141429" rel="stylesheet"></noscript>
    <link href="./css/theme.css?1701141429" rel="stylesheet">
    <link href="./css/theme-zen-light.css?1701141429" rel="stylesheet" id="R-variant-style">
    <link href="./css/variant.css?1701141429" rel="stylesheet">
    <link href="./css/print.css?1701141429" rel="stylesheet" media="print">
    <link href="./css/format-print.css?1701141429" rel="stylesheet">
    <link href="./css/ie.css?1701141429" rel="stylesheet">
    <script src="./js/url.js?1701141429"></script>
    <script src="./js/variant.js?1701141429"></script>
    <script>
      // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
      // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
      window.index_js_url="./index.search.js";
      var root_url="./";
      var baseUri=root_url.replace(/\/$/, '');
      // translations
      window.T_Copy_to_clipboard = '复制到剪贴板';
      window.T_Copied_to_clipboard = '复制到剪贴板！';
      window.T_Copy_link_to_clipboard = '将链接复制到剪贴板';
      window.T_Link_copied_to_clipboard = '链接复制到剪贴板！';
      window.T_Reset_view = '重置视图';
      window.T_View_reset = '查看重置！';
      window.T_No_results_found = '找不到\u0022{0}\u0022的结果';
      window.T_N_results_found = '为\u0022{0}\u0022找到 {1} 个结果';
      // some further base stuff
      var baseUriFull='https:\/\/dipperkun.gitee.io/';
      window.variants && variants.init( [ 'zen-light', 'zen-dark' ] );
    </script>
  </head>
  <body class="mobile-support print disableInlineCopyToClipboard" data-url="./">
    <div id="R-body" class="default-animation">
      <div id="R-body-overlay"></div>
      <nav id="R-topbar">
        <div class="topbar-wrapper">
          <div class="topbar-sidebar-divider"></div>
          <div class="topbar-area topbar-area-start" data-area="start">
            <div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide">
              <button class="topbar-control" onclick="toggleNav()" type="button" title="导航 (CTRL&#43;ALT&#43;n)">
                <i class="fa-fw fas fa-bars"></i>
              </button>
            </div>
          </div>
          <ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
            itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">[生活/工作/学习]</span><meta itemprop="position" content="1"></li>
          </ol>
          <div class="topbar-area topbar-area-end" data-area="end">
          </div>
        </div>
      </nav>
      <div id="R-main-overlay"></div>
      <main id="R-body-inner" class="highlightable home" tabindex="-1">
        <div class="flex-block-wrapper">
          <article class="home">
            <header class="headline">
            </header>
<h1 id="生活工作学习">[生活/工作/学习]</h1>

<p>记录【生活/工作/学习】。</p>

            <footer class="footline">
            </footer>
          </article>

          <section>
            <h1 class="a11y-only">[生活/工作/学习] 的子部分</h1>
          <article class="chapter">
            <header class="headline">
            </header>
<div class="article-subheading">第 1 篇</div>
<h1 id="数据结构与算法">数据结构与算法</h1>

<p>计算机科学的基石</p>

            <footer class="footline">
            </footer>
          </article>

          <article class="chapter">
            <header class="headline">
            </header>
<div class="article-subheading">第 2 篇</div>
<h1 id="linux-kernel">Linux Kernel</h1>

<p>Linux 操作系统原理</p>

            <footer class="footline">
            </footer>
          </article>

          <article class="chapter">
            <header class="headline">
            </header>
<div class="article-subheading">第 3 篇</div>
<h1 id="计算机网络">计算机网络</h1>

<p>Lorem Ipsum.</p>

            <footer class="footline">
            </footer>
          </article>

          <article class="chapter">
            <header class="headline">
            </header>
<div class="article-subheading">第 4 篇</div>
<h1 id="arm体系结构">ARM体系结构</h1>


            <footer class="footline">
            </footer>
          </article>

          <article class="chapter">
            <header class="headline">
            </header>
<div class="article-subheading">第 9 篇</div>
<h1 id="常用工具">常用工具</h1>

<p>工作/学习中常使用的各种工具。</p>

            <footer class="footline">
            </footer>
          </article>

          <article class="chapter">
            <header class="headline">
            </header>
<div class="article-subheading">第 10 篇</div>
<h1 id="静态网站">静态网站</h1>

<p>使用 <code>Hugo</code> 与 <code>Markdown</code> 生成静态网站，部署到 <code>Gitee Pages</code>。</p>

            <footer class="footline">
            </footer>
          </article>

          <section>
            <h1 class="a11y-only">静态网站 的子部分</h1>
          <article class="default">
            <header class="headline">
<div class=" taxonomy-tags term-list cstyle  tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
  <ul>
    <li><a class="term-link" href="./tags/hugo/">hugo</a></li>
    <li><a class="term-link" href="./tags/markdown/">markdown</a></li>
    <li><a class="term-link" href="./tags/shortcodes/">shortcodes</a></li>
    <li><a class="term-link" href="./tags/themes/">themes</a></li>
  </ul>
</div>
            </header>
<h1 id="使用hugo搭建静态网站">使用hugo搭建静态网站</h1>

<h2 id="安装-hugo">安装 hugo</h2>
<p>下载并安装hugo</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">wget https://ghps.cc/https://github.com/gohugoio/hugo/releases/download/v0.120.4/hugo_extended_0.120.4_linux-amd64.deb
</span></span><span class="line"><span class="cl">sudo apt instatll ./hugo_extended_0.120.4_linux-amd64.deb</span></span></code></pre></div><p>生成网站代码骨架</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new site ./notebook
</span></span><span class="line"><span class="cl"><span class="nb">cd</span> ./notebook</span></span></code></pre></div><h2 id="下载主题themes">下载主题(themes)</h2>
<p>在 <a href="https://gohub.io" target="_blank">hugo</a>官网选择合适的主题，放在网站代码骨架的 <code>themes</code> 文件夹下。本网站采用 <a href="https://mcshelby.github.io/hugo-theme-relearn" target="_blank">Relearn</a>主题。</p>
<h2 id="配置">配置</h2>
<p>根据主题的示例站点配置文件 <code>config.toml</code>，该文件位于代码骨架的根目录下。</p>
<h2 id="编写文章">编写文章</h2>
<p>网站首页文件为 <code>content/_index.md</code>。</p>
<p>生成形式为 <code>chapter</code> 的内容。</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter chapter01/_index.md
</span></span><span class="line"><span class="cl">vim content/chapter01/_index.md</span></span></code></pre></div><p>生成文章内容。</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new chapter01/article001/_index.md
</span></span><span class="line"><span class="cl">vim content/chapter01/article001/_index.md</span></span></code></pre></div><h2 id="测试与发布">测试与发布</h2>
<p>测试</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo server --disableFastRender -D</span></span></code></pre></div><p>发布
最终生成的网站 <code>html</code> 代码位于 <code>public</code> 目录。</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo</span></span></code></pre></div>
            <footer class="footline">
<div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
  <i class="fa-fw fas fa-layer-group"></i>
  <ul>
    <li><a class="term-link" href="./categories/%E5%B7%A5%E5%85%B7/">工具</a></li>
  </ul>
</div>
            </footer>
          </article>

          <article class="default">
            <header class="headline">
<div class=" taxonomy-tags term-list cstyle  tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
  <ul>
    <li><a class="term-link" href="./tags/markdown/">markdown</a></li>
  </ul>
</div>
            </header>
<h1 id="markdown">Markdown</h1>

<h2 id="markdown-简介">Markdown 简介</h2>
<h2 id="段落">段落</h2>
<p>段落之间使用空行分割。</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">这是第一段。
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">这是第二段。
</span></span><span class="line"><span class="cl">这也是第二段。
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">这才是第三段。</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p>这是第一段。</p>
<p>这是第二段。
这也是第二段。</p>
<p>这才是第三段。</p>
</div>
</div>
<h2 id="标题">标题</h2>
<p><code>h1 - h6</code> 使用1到6个 <code>#</code> 表示。</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="gh"># 一级标题
</span></span></span><span class="line"><span class="cl"><span class="gh"></span><span class="gu">## 二级标题
</span></span></span><span class="line"><span class="cl"><span class="gu">### 三级标题
</span></span></span><span class="line"><span class="cl"><span class="gu">#### 四级标题
</span></span></span><span class="line"><span class="cl"><span class="gu">##### 五级标题
</span></span></span><span class="line"><span class="cl"><span class="gu"></span>###### 六级标题</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<h1 id="一级标题">一级标题</h1>
<h2 id="二级标题">二级标题</h2>
<h3 id="三级标题">三级标题</h3>
<h4 id="四级标题">四级标题</h4>
<h5 id="五级标题">五级标题</h5>
<h6 id="六级标题">六级标题</h6>
</div>
</div>
<h2 id="水平分割线">水平分割线</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">---</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<hr>
</div>
</div>
<h2 id="文本样式">文本样式</h2>
<h3 id="加粗">加粗</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">这是**粗体**。</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p>这是<strong>粗体</strong>。</p>
</div>
</div>
<h3 id="斜体">斜体</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">这是 <span class="ge">_斜体_</span>。</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p>这是 <em>斜体</em>。</p>
</div>
</div>
<h3 id="删除">删除</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">这是~~删除~~。</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p>这是<del>删除</del>。</p>
</div>
</div>
<h2 id="文本替换">文本替换</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">|源文本|替换后文本|
</span></span><span class="line"><span class="cl">|------|-----------|
</span></span><span class="line"><span class="cl">|`&#34;`  |  <span class="ge">**</span>&#34;XXX&#34;** |
</span></span><span class="line"><span class="cl">|`&#39;`  |  <span class="ge">**</span>&#39;XXX&#39;** |
</span></span><span class="line"><span class="cl">|`<span class="err">&lt;&lt;</span>` |  <span class="ge">**</span><span class="err">&lt;&lt;</span>** |
</span></span><span class="line"><span class="cl">|`&gt;&gt;` |  <span class="ge">**</span>&gt;&gt;** |
</span></span><span class="line"><span class="cl">|`...`|  <span class="ge">**</span>...** |</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<table>
<thead>
<tr>
<th>源文本</th>
<th>替换后文本</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&quot;</code></td>
<td><strong>&ldquo;XXX&rdquo;</strong></td>
</tr>
<tr>
<td><code>'</code></td>
<td><strong>&lsquo;XXX&rsquo;</strong></td>
</tr>
<tr>
<td><code>&lt;&lt;</code></td>
<td><strong>&laquo;</strong></td>
</tr>
<tr>
<td><code>&gt;&gt;</code></td>
<td><strong>&raquo;</strong></td>
</tr>
<tr>
<td><code>...</code></td>
<td><strong>&hellip;</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
<h2 id="列表">列表</h2>
<h3 id="无序列表">无序列表</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">-</span> XX
</span></span><span class="line"><span class="cl">  + aa
</span></span><span class="line"><span class="cl">  + bb
</span></span><span class="line"><span class="cl"><span class="k">-</span> YY
</span></span><span class="line"><span class="cl">  + mm
</span></span><span class="line"><span class="cl">    <span class="k">*</span> 00
</span></span><span class="line"><span class="cl">    <span class="k">*</span> 11
</span></span><span class="line"><span class="cl">  + nn
</span></span><span class="line"><span class="cl"><span class="k">-</span> ZZ
</span></span><span class="line"><span class="cl">  <span class="k">-</span> 222
</span></span><span class="line"><span class="cl">  - 333</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<ul>
<li>XX
<ul>
<li>aa</li>
<li>bb</li>
</ul>
</li>
<li>YY
<ul>
<li>mm
<ul>
<li>00</li>
<li>11</li>
</ul>
</li>
<li>nn</li>
</ul>
</li>
<li>ZZ
<ul>
<li>222</li>
<li>333</li>
</ul>
</li>
</ul>
</div>
</div>
<h3 id="有序列表">有序列表</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">1.</span> XX
</span></span><span class="line"><span class="cl">    <span class="k">1.</span> aa
</span></span><span class="line"><span class="cl">    <span class="k">2.</span> bb
</span></span><span class="line"><span class="cl"><span class="k">1.</span> YY
</span></span><span class="line"><span class="cl">    <span class="k">1.</span> mm
</span></span><span class="line"><span class="cl">        <span class="k">1.</span> 00
</span></span><span class="line"><span class="cl">        <span class="k">3.</span> 11
</span></span><span class="line"><span class="cl">    <span class="k">99.</span> nn
</span></span><span class="line"><span class="cl"><span class="k">1.</span> ZZ
</span></span><span class="line"><span class="cl">    <span class="k">1.</span> 222
</span></span><span class="line"><span class="cl">    5. 333</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<ol>
<li>XX
<ol>
<li>aa</li>
<li>bb</li>
</ol>
</li>
<li>YY
<ol>
<li>mm
<ol>
<li>00</li>
<li>11</li>
</ol>
</li>
<li>nn</li>
</ol>
</li>
<li>ZZ
<ol>
<li>222</li>
<li>333</li>
</ol>
</li>
</ol>
</div>
</div>
<h3 id="任务">任务</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">- [x]</span> task
</span></span><span class="line"><span class="cl"><span class="k">- [ ]</span> task
</span></span><span class="line"><span class="cl">  <span class="k">- [x]</span> task
</span></span><span class="line"><span class="cl">  <span class="k">- [ ]</span> task
</span></span><span class="line"><span class="cl">- [ ] task</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<ul>
<li><input checked="" disabled="" type="checkbox"> task</li>
<li><input disabled="" type="checkbox"> task
<ul>
<li><input checked="" disabled="" type="checkbox"> task</li>
<li><input disabled="" type="checkbox"> task</li>
</ul>
</li>
<li><input disabled="" type="checkbox"> task</li>
</ul>
</div>
</div>
<h3 id="详情列表">详情列表</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">术语
</span></span><span class="line"><span class="cl">: 说明1描述
</span></span><span class="line"><span class="cl">: 说明2描述
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">术语
</span></span><span class="line"><span class="cl">: 说明1描述段落1。
</span></span><span class="line"><span class="cl">  
</span></span><span class="line"><span class="cl">  说明1描述段落2。
</span></span><span class="line"><span class="cl">: 说明2描述段落。</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<dl>
<dt>术语</dt>
<dd>说明1描述</dd>
<dd>说明2描述</dd>
<dt>术语</dt>
<dd>说明1描述段落1。
<p>说明1描述段落2。</p>
</dd>
<dd>说明2描述段落。</dd>
</dl>
</div>
</div>
<h2 id="代码">代码</h2>
<h3 id="行内代码">行内代码</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">递增运算 <span class="sb">`i++;`</span></span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p>递增运算 <code>i++;</code></p>
</div>
</div>
<h3 id="代码块">代码块</h3>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="s">```go
</span></span></span><span class="line"><span class="cl"><span class="s"></span><span class="kn">import</span> <span class="s">&#34;fmt&#34;</span>
</span></span><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="s">```</span></span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="kn">import</span> <span class="s">&#34;fmt&#34;</span>
</span></span><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></div>
</div>
<h2 id="表格">表格</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">默认左对齐
</span></span><span class="line"><span class="cl">|表头1 | 表头2 |
</span></span><span class="line"><span class="cl">|------|------|
</span></span><span class="line"><span class="cl">|数字| 1 2 3|
</span></span><span class="line"><span class="cl">|字母| a b c|
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">指定对齐方式
</span></span><span class="line"><span class="cl">|表头1 | 表头2 | 表头3 |
</span></span><span class="line"><span class="cl">|:-----|:----:|------:|
</span></span><span class="line"><span class="cl">|数字| 1 2 3|说明1|
</span></span><span class="line"><span class="cl">|字母| a b c|说明2|</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p>默认左对齐</p>
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>数字</td>
<td>1 2 3</td>
</tr>
<tr>
<td>字母</td>
<td>a b c</td>
</tr>
</tbody>
</table>
<p>指定对齐方式</p>
<table>
<thead>
<tr>
<th style="text-align:left">表头1</th>
<th style="text-align:center">表头2</th>
<th style="text-align:right">表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">数字</td>
<td style="text-align:center">1 2 3</td>
<td style="text-align:right">说明1</td>
</tr>
<tr>
<td style="text-align:left">字母</td>
<td style="text-align:center">a b c</td>
<td style="text-align:right">说明2</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2 id="块引用">块引用</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">段落1
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>继续段落1
</span></span><span class="line"><span class="cl"><span class="k">&gt;
</span></span></span><span class="line"><span class="cl"><span class="k"></span><span class="ge">&gt; &gt; 嵌套段落
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>    嵌套段落
</span></span><span class="line"><span class="cl">嵌套段落
</span></span><span class="line"><span class="cl">&gt;
</span></span><span class="line"><span class="cl">&gt; 段落2</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<blockquote>
<p>段落1
继续段落1</p>
<blockquote>
<p>嵌套段落
嵌套段落
嵌套段落</p>
</blockquote>
<p>段落2</p>
</blockquote>
</div>
</div>
<h2 id="链接">链接</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">自动链接 https://baidu.com
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">标准链接 [<span class="nt">百度</span>](<span class="na">https://baidu.com</span>)
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">带提示框的链接  [<span class="nt">百度</span>](<span class="na">https://baidu.com &#34;中文搜索引擎&#34;</span>)
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">参考链接 [百度][link-01]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[link-01]: https://baidu.com &#34;中文搜索引擎&#34;</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p>自动链接 <a href="https://baidu.com" target="_blank">https://baidu.com</a></p>
<p>标准链接 <a href="https://baidu.com" target="_blank">百度</a></p>
<p>带提示框的链接  <a href="https://baidu.com" title="中文搜索引擎" target="_blank">百度</a></p>
<p>参考链接 <a href="https://baidu.com" title="中文搜索引擎" target="_blank">百度</a></p>
</div>
</div>
<h2 id="脚注">脚注</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">什么是脚注[^1]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">脚注[^ft-01]的另外一种表示形式。
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[^1]: 脚注说明
</span></span><span class="line"><span class="cl">[^ft-01]:
</span></span><span class="line"><span class="cl">    脚注说明段落1。
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    脚注说明段落2。</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p>什么是脚注<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
<p>脚注<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>的另外一种表示形式。</p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>脚注说明&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:2">
<p>脚注说明段落1。</p>
<p>脚注说明段落2。&#160;<a href="#fnref:2" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
</div>
</div>
<h2 id="图片">图片</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">图片 ![<span class="nt">cat</span>](<span class="na">images/acat.jpg</span>)
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">带提示框的图片  ![<span class="nt">cat</span>](<span class="na">images/acat.jpg &#34;Cat&#34;</span>)
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">参考图片 [cat][pic-01]
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[pic-01]: images/acat.jpg &#34;Cat&#34;</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p>图片 <a href="#R-image-2cdec9757df7f87987e81328f9476400" class="lightbox-link"><img src="./static-website/markdown-syntax/images/acat.jpg" alt="cat" class="figure-image noborder lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-2cdec9757df7f87987e81328f9476400"><img src="./static-website/markdown-syntax/images/acat.jpg" alt="cat" class="lightbox-image noborder lightbox noshadow" loading="lazy"></a></p>
<p>带提示框的图片  <a href="#R-image-d6a01b39e9a91d0c1d93eb6c69bcd865" class="lightbox-link"><img src="./static-website/markdown-syntax/images/acat.jpg" alt="cat" title="Cat" class="figure-image noborder lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-d6a01b39e9a91d0c1d93eb6c69bcd865"><img src="./static-website/markdown-syntax/images/acat.jpg" alt="cat" title="Cat" class="lightbox-image noborder lightbox noshadow" loading="lazy"></a></p>
<p>参考图片 <a href="#R-image-ca9910a96a912e34d508184653dc7d88" class="lightbox-link"><img src="./static-website/markdown-syntax/images/acat.jpg" alt="cat" title="Cat" class="figure-image noborder lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-ca9910a96a912e34d508184653dc7d88"><img src="./static-website/markdown-syntax/images/acat.jpg" alt="cat" title="Cat" class="lightbox-image noborder lightbox noshadow" loading="lazy"></a></p>
</div>
</div>
<h2 id="图片特效">图片特效</h2>
<p>该主题（relearn）自定义的格式。</p>
<p>设置图片大小</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">cat</span>](<span class="na">images/cat.jpg?width=20vw</span>)
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">![<span class="nt">cat</span>](<span class="na">images/cat.jpg?height=80px</span>)</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p><a href="#R-image-5f074fa0b93bf05601aad0642a106933" class="lightbox-link"><img src="./static-website/markdown-syntax/images/cat.jpg?width=20vw" alt="cat" class="figure-image noborder lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-5f074fa0b93bf05601aad0642a106933"><img src="./static-website/markdown-syntax/images/cat.jpg?width=20vw" alt="cat" class="lightbox-image noborder lightbox noshadow" loading="lazy"></a></p>
<p><a href="#R-image-e0544a0d2bff751662f49a64ebfa0147" class="lightbox-link"><img src="./static-website/markdown-syntax/images/cat.jpg?height=80px" alt="cat" class="figure-image noborder lightbox noshadow" style="height: 80px; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-e0544a0d2bff751662f49a64ebfa0147"><img src="./static-website/markdown-syntax/images/cat.jpg?height=80px" alt="cat" class="lightbox-image noborder lightbox noshadow" loading="lazy"></a></p>
</div>
</div>
<p>设置CSS</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">cat</span>](<span class="na">images/acat.jpg?classes=shadow</span>)
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">![<span class="nt">cat</span>](<span class="na">images/acat.jpg?classes=border</span>)</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p><a href="#R-image-f12f5206954795895afed6f1c854f972" class="lightbox-link"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=shadow" alt="cat" class="figure-image noborder lightbox shadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-f12f5206954795895afed6f1c854f972"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=shadow" alt="cat" class="lightbox-image noborder lightbox shadow" loading="lazy"></a></p>
<p><a href="#R-image-3b0c81ccb2e081fa8473f5082499ad61" class="lightbox-link"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=border" alt="cat" class="figure-image border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-3b0c81ccb2e081fa8473f5082499ad61"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=border" alt="cat" class="lightbox-image border lightbox noshadow" loading="lazy"></a></p>
</div>
</div>
<p>位置</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">cat</span>](<span class="na">images/acat.jpg?classes=left</span>)
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">![<span class="nt">cat</span>](<span class="na">images/acat.jpg?classes=right</span>)</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p><a href="#R-image-2cb03edff55b4184fae5b1a6e988c24d" class="lightbox-link"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=left" alt="cat" class="figure-image noborder left lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-2cb03edff55b4184fae5b1a6e988c24d"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=left" alt="cat" class="lightbox-image noborder left lightbox noshadow" loading="lazy"></a></p>
<p><a href="#R-image-2c024df9ba603c92e7a0dc2a66f7edfd" class="lightbox-link"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=right" alt="cat" class="figure-image noborder lightbox right noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-2c024df9ba603c92e7a0dc2a66f7edfd"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=right" alt="cat" class="lightbox-image noborder lightbox right noshadow" loading="lazy"></a></p>
</div>
</div>
<p>内联</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">cat</span>](<span class="na">images/acat.jpg?classes=inline</span>)
</span></span><span class="line"><span class="cl">![<span class="nt">cat</span>](<span class="na">images/acat.jpg?classes=inline</span>)
</span></span><span class="line"><span class="cl">![<span class="nt">cat</span>](<span class="na">images/acat.jpg?classes=inline</span>)</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p><a href="#R-image-5217af4f4315b6f1c13417da45666b89" class="lightbox-link"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=inline" alt="cat" class="figure-image noborder inline lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-5217af4f4315b6f1c13417da45666b89"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=inline" alt="cat" class="lightbox-image noborder inline lightbox noshadow" loading="lazy"></a>
<a href="#R-image-aa56092702f67f8bc4434438c27c4cb6" class="lightbox-link"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=inline" alt="cat" class="figure-image noborder inline lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-aa56092702f67f8bc4434438c27c4cb6"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=inline" alt="cat" class="lightbox-image noborder inline lightbox noshadow" loading="lazy"></a>
<a href="#R-image-5b9c4433e38d07f5a1b5318b07403737" class="lightbox-link"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=inline" alt="cat" class="figure-image noborder inline lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-5b9c4433e38d07f5a1b5318b07403737"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=inline" alt="cat" class="lightbox-image noborder inline lightbox noshadow" loading="lazy"></a></p>
</div>
</div>
<p>组合</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">cat</span>](<span class="na">images/acat.jpg?classes=left,border,shadow</span>)</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p><a href="#R-image-e5875a8dd93e88f359ef4bf239ea50f8" class="lightbox-link"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=left,border,shadow" alt="cat" class="figure-image border left lightbox shadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-e5875a8dd93e88f359ef4bf239ea50f8"><img src="./static-website/markdown-syntax/images/acat.jpg?classes=left,border,shadow" alt="cat" class="lightbox-image border left lightbox shadow" loading="lazy"></a></p>
</div>
</div>
<p>Lightbox(控制图片的链接)</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">cat</span>](<span class="na">images/acat.jpg?lightbox=false</span>)
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">[<span class="nt">![cat</span>](<span class="na">images/acat.jpg?lightbox=false</span>)](https://octodex.github.com/#homercat)</span></span></code></pre></div>
<div class="box notices cstyle secondary">
  <div class="box-label"><i class="fa-fw fas fa-eye"></i> 效果</div>
  <div class="box-content">

<p><img src="./static-website/markdown-syntax/images/acat.jpg?lightbox=false" alt="cat" class="figure-image noborder nolightbox noshadow" style="height: auto; width: auto;" loading="lazy"></p>
<p><a href="https://octodex.github.com/#homercat" target="_blank"><img src="./static-website/markdown-syntax/images/acat.jpg?lightbox=false" alt="cat" class="figure-image noborder nolightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a></p>
</div>
</div>

            <footer class="footline">
<div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
  <i class="fa-fw fas fa-layer-group"></i>
  <ul>
    <li><a class="term-link" href="./categories/%E5%B7%A5%E5%85%B7/">工具</a></li>
  </ul>
</div>
            </footer>
          </article>

          <article class="default">
            <header class="headline">
<div class=" taxonomy-tags term-list cstyle  tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
  <ul>
    <li><a class="term-link" href="./tags/markdown/">markdown</a></li>
    <li><a class="term-link" href="./tags/shortcodes/">shortcodes</a></li>
  </ul>
</div>
            </header>
<h1 id="shortcodes简码">shortcodes(简码)</h1>

<p><code>shortcodes</code> 是 <code>markdown</code> 的补充，是 <code>hugo</code> 提供的扩展功能，简化了网站代码的编写。<code>Relearn</code> 主题提供了丰富的 <code>shortcodes</code> 。</p>
<h2 id="attachment附件">attachment（附件）</h2>

<div class="box notices cstyle warning">
  <div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> 警告</div>
  <div class="box-content">

<p>附件放在 <code>_index.files</code> 目录下。</p>
</div>
</div>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">attachments</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;**文件**&#34;</span> <span class="nx">pattern</span><span class="p">=</span><span class="s">&#34;.*\.(pdf|jpg)&#34;</span> <span class="o">/%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box attachments cstyle transparent">
  <div class="box-label"><i class="fa-fw fas fa-paperclip"></i> <strong>文件</strong></div>
  <ul class="box-content attachments-files">
      <li><a href="./static-website/shortcodes/index.files/arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf">arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf</a> (493 KB)</li>
      <li><a href="./static-website/shortcodes/index.files/cat.jpg">cat.jpg</a> (48 KB)</li>
  </ul>
</div>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">attachments</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;info&#34;</span> <span class="nx">sort</span><span class="p">=</span><span class="s">&#34;desc&#34;</span> <span class="o">/%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box attachments cstyle info">
  <div class="box-label"><i class="fa-fw fas fa-info-circle"></i> 信息</div>
  <ul class="box-content attachments-files">
      <li><a href="./static-website/shortcodes/index.files/test.txt">test.txt</a> (36 B)</li>
      <li><a href="./static-website/shortcodes/index.files/cat.jpg">cat.jpg</a> (48 KB)</li>
      <li><a href="./static-website/shortcodes/index.files/arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf">arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf</a> (493 KB)</li>
  </ul>
</div>
<h2 id="badge徽章">badge（徽章）</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Important</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Version&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="mf">6.6.6</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;red&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;angle-double-up&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Captain</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;info&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">New</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">color</span><span class="p">=</span><span class="s">&#34;fuchsia&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;fab fa-hackerrank&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p><span class="badge cstyle default"><span class="badge-content">Important</span></span>
<span class="badge cstyle primary badge-with-title"><span class="badge-title">Version</span><span class="badge-content">6.6.6</span></span>
<span class="badge cstyle red badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i></span><span class="badge-content">Captain</span></span>
<span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-info-circle"></i> 信息</span><span class="badge-content">New</span></span>
<span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Awesome</span></span></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;info&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">New</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;note&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Change</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;tip&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Optional</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;warning&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Breaking</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-info-circle"></i> 信息</span><span class="badge-content">New</span></span>
<span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i> 注释</span><span class="badge-content">Change</span></span>
<span class="badge cstyle tip badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-lightbulb"></i> 提示</span><span class="badge-content">Optional</span></span>
<span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i> 警告</span><span class="badge-content">Breaking</span></span></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;bullhorn&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;声明&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Mandatory</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;secondary&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;bullhorn&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;声明&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Optional</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;accent&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;bullhorn&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;声明&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Special</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p><span class="badge cstyle primary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bullhorn"></i> 声明</span><span class="badge-content">Mandatory</span></span>
<span class="badge cstyle secondary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bullhorn"></i> 声明</span><span class="badge-content">Optional</span></span>
<span class="badge cstyle accent badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bullhorn"></i> 声明</span><span class="badge-content">Special</span></span></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;blue&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;palette&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Color&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Blue</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;green&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;palette&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Color&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Green</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;grey&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;palette&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Color&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Grey</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;orange&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;palette&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Color&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Orange</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;red&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;palette&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Color&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Red</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p><span class="badge cstyle blue badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Blue</span></span>
<span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Green</span></span>
<span class="badge cstyle grey badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Grey</span></span>
<span class="badge cstyle orange badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Orange</span></span>
<span class="badge cstyle red badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Red</span></span></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;info&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;rocket&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Feature&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-rocket"></i> Feature</span><span class="badge-content">Awesome</span></span>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;angle-double-up&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Rank&#34;</span> <span class="p">&gt;}}{{</span><span class="o">%</span> <span class="nx">icon</span> <span class="nx">skull</span><span class="o">-</span><span class="nx">crossbones</span> <span class="o">%</span><span class="p">}}</span> <span class="nx">Pirate</span><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">badge</span> <span class="p">&gt;}}</span></span></span></code></pre></div><span class="badge cstyle primary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i> Rank</span><span class="badge-content"><i class="fa-fw fas fa-skull-crossbones"></i> Pirate</span></span>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="nx">段落内显示</span> <span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;blue&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;rocket&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span> <span class="nx">徽章</span><span class="err">。</span></span></span></code></pre></div><p>段落内显示 <span class="badge cstyle blue badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-rocket"></i></span><span class="badge-content">Awesome</span></span> 徽章。</p>
<h2 id="button按钮">button（按钮）</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;info&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;note&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;tip&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;warning&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p>
<span class="btn cstyle info">
  <a href="https://gohugo.io/" target="_blank">
    <i class="fa-fw fas fa-info-circle"></i>
    Hugo
  </a>
</span>

<span class="btn cstyle note">
  <a href="https://gohugo.io/" target="_blank">
    <i class="fa-fw fas fa-exclamation-circle"></i>
    Hugo
  </a>
</span>

<span class="btn cstyle tip">
  <a href="https://gohugo.io/" target="_blank">
    <i class="fa-fw fas fa-lightbulb"></i>
    Hugo
  </a>
</span>

<span class="btn cstyle warning">
  <a href="https://gohugo.io/" target="_blank">
    <i class="fa-fw fas fa-exclamation-triangle"></i>
    Hugo
  </a>
</span></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;download&#34;</span> <span class="nx">iconposition</span><span class="p">=</span><span class="s">&#34;right&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<span class="btn cstyle transparent">
  <a href="https://gohugo.io/" target="_blank">
    Hugo
    <i class="fa-fw fas fa-download"></i>
  </a>
</span>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;/index.html&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">首页</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<span class="btn cstyle transparent">
  <a href="./index.html">
    首页
  </a>
</span>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;bullhorn&#34;</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;javascript:alert(&#39;Haaa&#39;);this.blur();&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Haaa</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<span class="btn cstyle primary">
  <button onclick="alert(&#39;Haaa&#39;);this.blur();" type="button">
    <i class="fa-fw fas fa-bullhorn"></i>
    Haaa
  </button>
</span>
<h2 id="子页面">子页面</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="c1">// 1.默认，不显示隐藏子页面
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span>  <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="c1">// 2.显示子页面描述信息
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span>  <span class="nx">description</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="c1">// 3.递归显示所有子页面，包括隐藏子页面
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">depth</span><span class="p">=</span><span class="s">&#34;999&#34;</span> <span class="nx">showhidden</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="c1">// 4。标题风格
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">containerstyle</span><span class="p">=</span><span class="s">&#34;div&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;h2&#34;</span> <span class="nx">depth</span><span class="p">=</span><span class="s">&#34;3&#34;</span> <span class="nx">description</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="c1">// 5.块风格
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">containerstyle</span><span class="p">=</span><span class="s">&#34;div&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;div&#34;</span> <span class="nx">depth</span><span class="p">=</span><span class="s">&#34;3&#34;</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p><a href="#R-image-9136254b5524a43bc4dd5fa55b5a5031" class="lightbox-link"><img src="./static-website/shortcodes/images/children01.png?classes=border" alt="children 1" class="figure-image border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-9136254b5524a43bc4dd5fa55b5a5031"><img src="./static-website/shortcodes/images/children01.png?classes=border" alt="children 1" class="lightbox-image border lightbox noshadow" loading="lazy"></a></p>
<p><a href="#R-image-4a3a0f0fb0cd1c924b6630dae35dbf57" class="lightbox-link"><img src="./static-website/shortcodes/images/children02.png?classes=border" alt="children 2" class="figure-image border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-4a3a0f0fb0cd1c924b6630dae35dbf57"><img src="./static-website/shortcodes/images/children02.png?classes=border" alt="children 2" class="lightbox-image border lightbox noshadow" loading="lazy"></a></p>
<p><a href="#R-image-ccacd33d25d88cc3a06f495ff01ac4fd" class="lightbox-link"><img src="./static-website/shortcodes/images/children03.png?classes=border" alt="children 3" class="figure-image border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-ccacd33d25d88cc3a06f495ff01ac4fd"><img src="./static-website/shortcodes/images/children03.png?classes=border" alt="children 3" class="lightbox-image border lightbox noshadow" loading="lazy"></a></p>
<p><a href="#R-image-2ec1bb327c8551df28c5af6811b0328d" class="lightbox-link"><img src="./static-website/shortcodes/images/children04.png?classes=border" alt="children 4" class="figure-image border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-2ec1bb327c8551df28c5af6811b0328d"><img src="./static-website/shortcodes/images/children04.png?classes=border" alt="children 4" class="lightbox-image border lightbox noshadow" loading="lazy"></a></p>
<p><a href="#R-image-909df31a30a2ad97ede26903664ef4ad" class="lightbox-link"><img src="./static-website/shortcodes/images/children05.png?classes=border" alt="children 5" class="figure-image border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-909df31a30a2ad97ede26903664ef4ad"><img src="./static-website/shortcodes/images/children05.png?classes=border" alt="children 5" class="lightbox-image border lightbox noshadow" loading="lazy"></a></p>
<h2 id="展开与折叠">展开与折叠</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;展开...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="expand">
    <input type="checkbox" id="R-expand-ff06cde7ba77f73bb78363e051cfae35" aria-controls="R-expandcontent-ff06cde7ba77f73bb78363e051cfae35"  checked>
    <label class="expand-label" for="R-expand-ff06cde7ba77f73bb78363e051cfae35" >
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-chevron-right"></i>
        展开&hellip;
    </label>
    <div id="R-expandcontent-ff06cde7ba77f73bb78363e051cfae35" class="expand-content">
<p>
No need to press you!</div>
</div>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;展开 **markdown** 内容&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">You</span> <span class="nx">can</span> <span class="nx">add</span> <span class="nx">standard</span> <span class="nx">markdown</span> <span class="nx">syntax</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">and</span> <span class="nx">even</span> <span class="o">**</span><span class="nx">_bold</span> <span class="nx">emphasized_</span><span class="o">**</span> <span class="nx">text</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">etc</span><span class="p">.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">the</span> <span class="nx">possibilities</span> <span class="nx">are</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="expand">
    <input type="checkbox" id="R-expand-506808abf1abafc4163497ac510bc75e" aria-controls="R-expandcontent-506808abf1abafc4163497ac510bc75e" >
    <label class="expand-label" for="R-expand-506808abf1abafc4163497ac510bc75e" >
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-chevron-right"></i>
        展开 <strong>markdown</strong> 内容
    </label>
    <div id="R-expandcontent-506808abf1abafc4163497ac510bc75e" class="expand-content">

<p>You can add standard markdown syntax:</p>
<ul>
<li>multiple paragraphs</li>
<li>bullet point lists</li>
<li><em>emphasized</em>, <strong>bold</strong> and even <strong><em>bold emphasized</em></strong> text</li>
<li><a href="https://example.com" target="_blank">links</a></li>
<li>etc.</li>
</ul>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div><blockquote>
<p>the possibilities are endless (almost - including other shortcodes may or may not work)</p>
</blockquote>
</div>
</div>
<h2 id="icon图标">icon（图标）</h2>
<p>图标地址：<a href="https://fontawesome.com/v5/search?m=free" target="_blank">Font Awesome Gallery</a>。</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="nx">图标</span><span class="err">：</span><span class="p">{{</span><span class="o">%</span> <span class="nx">icon</span> <span class="nx">heart</span> <span class="o">%</span><span class="p">}}</span> <span class="p">{{</span><span class="o">%</span> <span class="nx">icon</span> <span class="nx">wifi</span> <span class="o">%</span><span class="p">}}</span> <span class="p">&lt;</span><span class="nx">i</span> <span class="nx">class</span><span class="p">=</span><span class="s">&#34;fas fa-heart&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;color: #FF0000;&#34;</span><span class="p">&gt;&lt;</span><span class="o">/</span><span class="nx">i</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nx">i</span> <span class="nx">class</span><span class="p">=</span><span class="s">&#34;fas fa-walking&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;color: red;&#34;</span><span class="p">&gt;&lt;</span><span class="o">/</span><span class="nx">i</span><span class="p">&gt;</span> <span class="p">{{</span><span class="o">%</span> <span class="nx">icon</span> <span class="nx">tools</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p>图标：<i class="fa-fw fas fa-heart"></i> <i class="fa-fw fas fa-wifi"></i>
<i class="fas fa-heart" style="color: #FF0000;"></i>
<i class="fas fa-walking" style="color: red;"></i> <i class="fa-fw fas fa-tools"></i></p>
<h2 id="include内嵌">include（内嵌）</h2>
<p>以下内容位于 <code>inc.md</code> 中。</p>
<p>You can add standard markdown syntax:</p>
<ul>
<li>multiple paragraphs</li>
<li>bullet point lists</li>
<li><em>emphasized</em>, <strong>bold</strong> and even <strong><em>bold emphasized</em></strong> text</li>
<li><a href="https://example.com" target="_blank">links</a></li>
<li>etc.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li>
</ul>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div><blockquote>
<p>the possibilities are endless (almost - including other shortcodes may or may not work) (almost - including other shortcodes may or may not work)</p>
</blockquote>
<h2 id="公式">公式</h2>
<p>使用 <a href="https://mathjax.org/" target="_blank">MathJax</a>。</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">```math { align=&#34;center&#34; }
</span></span><span class="line"><span class="cl">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
<span class="math align-center">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$</span><p>行内公式使用 <code>$</code>，例如 <code>{{&lt; math &gt;}}$\sqrt{3}${{&lt; /math &gt;}}</code>：
<span class="math align-center">$\sqrt{3}$</span> 。</p>
<h2 id="mermaid">mermaid</h2>
<p>绘制流程图与框图。</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">```mermaid { align=&#34;center&#34; zoom=&#34;true&#34; }
</span></span><span class="line"><span class="cl">graph LR;
</span></span><span class="line"><span class="cl">    If --&gt; Then
</span></span><span class="line"><span class="cl">    Then --&gt; Else
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
<pre class="mermaid align-center zoom">graph LR;
    If --&gt; Then
    Then --&gt; Else</pre><p><strong>流程图</strong></p>

<pre class="mermaid align-center zoom">
---
title: Example Diagram
---
graph LR;
    A[Hard edge] --&gt;|Link text| B(Round edge)
    B --&gt; C{&lt;strong&gt;Decision&lt;/strong&gt;}
    C --&gt;|One| D[Result one]
    C --&gt;|Two| E[Result two]
</pre>
<p><strong>流程图（带序号）</strong></p>

<pre class="mermaid align-center zoom">
%%{init:{&#34;fontFamily&#34;:&#34;monospace&#34;, &#34;sequence&#34;:{&#34;showSequenceNumbers&#34;:true}}}%%
sequenceDiagram
    Alice-&gt;&gt;John: Hello John, how are you?
    loop Healthcheck
        John-&gt;&gt;John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John--&gt;&gt;Alice: Great!
    John-&gt;&gt;Bob: How about you?
    Bob--&gt;&gt;John: Jolly good!
</pre>
<p><strong>类图</strong></p>

<pre class="mermaid align-center zoom">classDiagram
    Animal &lt;|-- Duck
    Animal &lt;|-- Fish
    Animal &lt;|-- Zebra
    Animal : &#43;int age
    Animal : &#43;String gender
    Animal: &#43;isMammal()
    Animal: &#43;mate()
    class Duck{
      &#43;String beakColor
      &#43;swim()
      &#43;quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      &#43;bool is_wild
      &#43;run()
    }</pre><p><strong>状态图（右对齐）</strong></p>

<pre class="mermaid align-right zoom">
stateDiagram-v2
    open: Open Door
    closed: Closed Door
    locked: Locked Door
    open   --&gt; closed: Close
    closed --&gt; locked: Lock
    locked --&gt; closed: Unlock
    closed --&gt; open: Open
</pre>
<p><strong>行程安排图</strong></p>

<pre class="mermaid align-center zoom">
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
</pre>
<p><strong>甘特图</strong></p>

<pre class="mermaid align-center zoom">
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to Mermaid
        section A section
        Completed task            :done,    des1, 2023-01-06,2023-01-08
        Active task               :active,  des2, 2023-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2              :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2023-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to Mermaid                      :1d
</pre>
<p><strong>饼状图（禁用缩放）</strong></p>

<pre class="mermaid align-center">
pie title Pets adopted by volunteers
    &#34;Dogs&#34; : 386
    &#34;Cats&#34; : 85
    &#34;Rats&#34; : 15
</pre>
<p><strong>象限图</strong></p>

<pre class="mermaid align-center zoom">quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --&gt; High Reach
    y-axis Low Engagement --&gt; High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]</pre><p><strong>脑图</strong></p>

<pre class="mermaid align-center zoom">mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness&lt;br/&gt;and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid</pre><p><strong>时间线图</strong></p>

<pre class="mermaid align-center zoom">timeline
    title 时间线图
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter</pre><p><strong>柱状图</strong></p>

<pre class="mermaid align-center zoom">xychart-beta
    title &#34;Sales Revenue&#34;
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis &#34;Revenue (in $)&#34; 4000 --&gt; 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]</pre><h2 id="提示">提示</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="c1">// style: info, note, tip, warning
</span></span></span><span class="line"><span class="cl"><span class="c1">// style: primary,secondary, accent
</span></span></span><span class="line"><span class="cl"><span class="c1">// style: blue, green, grey, orange, red
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;xxx&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;yyy&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;zzz&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">内容</span><span class="err">，</span><span class="nx">可以包含</span> <span class="s">`markdown`</span> <span class="nx">格式</span><span class="err">。</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle info">
  <div class="box-label"><i class="fa-fw fas fa-info-circle"></i> 信息</div>
  <div class="box-content">

<p>An <strong>information</strong> disclaimer</p>
<p>You can add standard markdown syntax:</p>
<ul>
<li>multiple paragraphs</li>
<li>bullet point lists</li>
<li><em>emphasized</em>, <strong>bold</strong> and even <em><strong>bold emphasized</strong></em> text</li>
<li><a href="https://example.com" target="_blank">links</a></li>
<li>etc.</li>
</ul>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div><blockquote>
<p>the possibilities are endless (almost - including other shortcodes may or may not work)</p>
</blockquote>
</div>
</div>

<div class="box notices cstyle warning">
  <div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> 警告</div>
  <div class="box-content">

<p>A <strong>warning</strong> disclaimer</p>
</div>
</div>

<div class="box notices cstyle warning">
  <div class="box-label"><i class="fa-fw fas fa-dragon"></i> 奖励</div>
  <div class="box-content">

<p>替换 <strong>默认</strong> 标题与图标。</p>
</div>
</div>

<div class="box notices cstyle default" style="--VARIABLE-BOX-color: fuchsia;">
  <div class="box-label"><i class="fab fa-hackerrank"></i> <strong>Hugo</strong></div>
  <div class="box-content">

<p>使用自定义的色彩与图标</p>
</div>
</div>
<h2 id="tabs选项卡">TABS（选项卡）</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="c1">// groupid 具有相同id的多个选项卡联动
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{&lt;</span> <span class="nx">tabs</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;hello.&#34;</span> <span class="nx">groupid</span><span class="p">=</span><span class="s">&#34;aaa&#34;</span> <span class="p">&gt;}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;py&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">这是</span> <span class="o">**</span><span class="nx">python</span><span class="o">**</span> <span class="nx">代码</span>
</span></span><span class="line"><span class="cl"><span class="s">```python
</span></span></span><span class="line"><span class="cl"><span class="s">print(&#34;Hello World!&#34;)
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;sh&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="s">```bash
</span></span></span><span class="line"><span class="cl"><span class="s">echo &#34;Hello World!&#34;
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;c&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">这是</span> <span class="o">**</span><span class="nx">c</span><span class="o">**</span> <span class="nx">代码</span>
</span></span><span class="line"><span class="cl"><span class="s">```c
</span></span></span><span class="line"><span class="cl"><span class="s">printf&#34;Hello World!&#34;);
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
<div class="tab-panel" data-tab-group="aaa">
  <div class="tab-nav">
    <div class="tab-nav-title">hello.</div>
    <button
      data-tab-item="py"
      class="tab-nav-button tab-panel-style cstyle initial active"
      onclick="switchTab('aaa','py')"
    >
      <span class="tab-nav-text">py</span>
    </button>
    <button
      data-tab-item="sh"
      class="tab-nav-button tab-panel-style cstyle initial"
      onclick="switchTab('aaa','sh')"
    >
      <span class="tab-nav-text">sh</span>
    </button>
    <button
      data-tab-item="c"
      class="tab-nav-button tab-panel-style cstyle initial"
      onclick="switchTab('aaa','c')"
    >
      <span class="tab-nav-text">c</span>
    </button>
  </div>
  <div class="tab-content-container">
    <div
      data-tab-item="py"
      class="tab-content tab-panel-style cstyle initial active">
      <div class="tab-content-text">

<p>这是 <strong>python</strong> 代码</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">&#34;Hello World!&#34;</span><span class="p">)</span></span></span></code></pre></div></div>
    </div>
    <div
      data-tab-item="sh"
      class="tab-content tab-panel-style cstyle initial">
      <div class="tab-content-text">

<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">&#34;Hello World!&#34;</span></span></span></code></pre></div></div>
    </div>
    <div
      data-tab-item="c"
      class="tab-content tab-panel-style cstyle initial">
      <div class="tab-content-text">

<p>这是 <strong>c</strong> 代码</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="n">printf</span><span class="s">&#34;Hello World!&#34;</span><span class="p">);</span></span></span></code></pre></div></div>
    </div>
  </div>
</div>

<div class="tab-panel" data-tab-group="main">
  <div class="tab-nav">
    <div class="tab-nav-title"><i class="fa-fw fas fa-thumbtack"></i> 嵌套选项卡</div>
    <button
      data-tab-item="text"
      class="tab-nav-button tab-panel-style cstyle primary active"
      onclick="switchTab('main','text')"
    >
      <span class="tab-nav-text">Text</span>
    </button>
    <button
      data-tab-item="code"
      class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: darkorchid;"
      onclick="switchTab('main','code')"
    >
      <span class="tab-nav-text">Code</span>
    </button>
  </div>
  <div class="tab-content-container">
    <div
      data-tab-item="text"
      class="tab-content tab-panel-style cstyle primary active">
      <div class="tab-content-text">
<p>

  这个 tab 只能使用 '<'，这里的文字不能使用 markdown
  
<div class="tab-panel" data-tab-group="tabs-example-language">
  <div class="tab-nav">
    <div class="tab-nav-title">&#8203;</div>
    <button
      data-tab-item="python"
      class="tab-nav-button tab-panel-style cstyle initial active"
      onclick="switchTab('tabs-example-language','python')"
    >
      <span class="tab-nav-text">python</span>
    </button>
    <button
      data-tab-item="bash"
      class="tab-nav-button tab-panel-style cstyle initial"
      onclick="switchTab('tabs-example-language','bash')"
    >
      <span class="tab-nav-text">bash</span>
    </button>
  </div>
  <div class="tab-content-container">
    <div
      data-tab-item="python"
      class="tab-content tab-panel-style cstyle initial active">
      <div class="tab-content-text">

<p>Python is <strong>super</strong> easy.</p>
<ul>
<li>most of the time.</li>
<li>if you don&rsquo;t want to output unicode</li>
</ul>
</div>
    </div>
    <div
      data-tab-item="bash"
      class="tab-content tab-panel-style cstyle initial">
      <div class="tab-content-text">

<p>Bash is for <strong>hackers</strong>.</p>
</div>
    </div>
  </div>
</div>
</div>
    </div>
    <div
      data-tab-item="code"
      class="tab-content tab-panel-style cstyle default" style="--VARIABLE-BOX-color: darkorchid;">
      <div class="tab-content-text">


  
<div class="tab-panel" data-tab-group="tabs-example-language">
  <div class="tab-nav">
    <div class="tab-nav-title">&#8203;</div>
    <button
      data-tab-item="python"
      class="tab-nav-button tab-panel-style cstyle initial active"
      onclick="switchTab('tabs-example-language','python')"
    >
      <span class="tab-nav-text">python</span>
    </button>
    <button
      data-tab-item="bash"
      class="tab-nav-button tab-panel-style cstyle initial"
      onclick="switchTab('tabs-example-language','bash')"
    >
      <span class="tab-nav-text">bash</span>
    </button>
  </div>
  <div class="tab-content-container">
    <div
      data-tab-item="python"
      class="tab-content tab-panel-style cstyle initial active">
      <div class="tab-content-text">

<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">&#34;Hello World!&#34;</span><span class="p">)</span></span></span></code></pre></div></div>
    </div>
    <div
      data-tab-item="bash"
      class="tab-content tab-panel-style cstyle initial">
      <div class="tab-content-text">

<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">&#34;Hello World!&#34;</span></span></span></code></pre></div></div>
    </div>
  </div>
</div>
</div>
    </div>
  </div>
</div>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a Latin expression that is used in English to mean &ldquo;and other similar things&rdquo;, or &ldquo;and so forth&rdquo;&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>

            <footer class="footline">
<div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
  <i class="fa-fw fas fa-layer-group"></i>
  <ul>
    <li><a class="term-link" href="./categories/%E5%B7%A5%E5%85%B7/">工具</a></li>
  </ul>
</div>
            </footer>
          </article>

          </section>
          </section>
        </div>
      </main>
    </div>
    <script src="./js/clipboard.min.js?1701141429" defer></script>
    <script src="./js/perfect-scrollbar.min.js?1701141429" defer></script>
    <script>
      function useMathJax( config ){
        if( !Object.assign ){
          
          return;
        }
        window.MathJax = Object.assign( window.MathJax || {}, {
          loader: {
            load: ['[tex]/mhchem']
          },
          startup: {
            elements: [
              '.math'
            ]
          },
          tex: {
            inlineMath: [
              ['$', '$'], 
              ['\\(', '\\)']
            ]
          },
          options: {
            enableMenu: false 
          }
        }, config );
      }
      useMathJax( JSON.parse("{}") );
    </script>
    <script id="MathJax-script" async src="./js/mathjax/tex-mml-chtml.js?1701141429"></script>
    <script src="./js/d3/d3-color.min.js?1701141429" defer></script>
    <script src="./js/d3/d3-dispatch.min.js?1701141429" defer></script>
    <script src="./js/d3/d3-drag.min.js?1701141429" defer></script>
    <script src="./js/d3/d3-ease.min.js?1701141429" defer></script>
    <script src="./js/d3/d3-interpolate.min.js?1701141429" defer></script>
    <script src="./js/d3/d3-selection.min.js?1701141429" defer></script>
    <script src="./js/d3/d3-timer.min.js?1701141429" defer></script>
    <script src="./js/d3/d3-transition.min.js?1701141429" defer></script>
    <script src="./js/d3/d3-zoom.min.js?1701141429" defer></script>
    <script src="./js/js-yaml.min.js?1701141429" defer></script>
    <script src="./js/mermaid.min.js?1701141429" defer></script>
    <script>
      window.themeUseMermaid = JSON.parse("{}");
    </script>
    <script src="./js/theme.js?1701141429" defer></script>
  </body>
</html>
